<template>
  <div class="attr-nav">
    <div
      v-for="(item, index) in dataList"
      :key="item.id"
      class="_attr-item"
      :class="{'_attr-avtive': index === activeIndex}"
      @click="handleClick(item,index)"
    >
      <span>{{ item.name }}</span>
      <!-- <img v-if="item.value" :src="iconPath"> -->
    </div>
    <div v-if="showTriangle" class="_triangle">
      <span :class="{grey: activeIndex===0}" @click="handleNumClick(1)"></span>
      <span :class="{grey: activeIndex===dataList.length -1}" @click="handleNumClick(0)"></span>
    </div>
  </div>
</template>
<script>
export default {
  name: 'attr-nav',
  props: {
    dataList: {
      type: Array,
      default: function () {
        return [];
      }
    },
    activeIndex: {
      type: Number,
      default: 0
    },
    showTriangle: {
      type: Boolean,
      default: true
    },
  },
  data() {
    return {
      vindex: 0
    };
  },
  computed: {
    iconPath(){
      return app.selectedElement?.iconPath;
    },
  },
  watch: {
    activeIndex(val) {
      this.$nextTick(() => {
        this.vindex = val;
      });
    }
  },
  methods: {
    handleClick(data, index) {

      this.$emit("click", index);
    },
    handleNumClick(value) {
      value === 0 ? this.vindex ++ : this.vindex--;
      if ( this.vindex <= 0 ) {
        this.vindex = 0;
      } else if ( this.vindex >= this.dataList.length - 1  ) {
        this.vindex = this.dataList.length - 1;
      }
      this.$emit("click", this.vindex);
    }
  },
};
</script>
<style lang="scss" scope>
.attr-nav {
  position: relative;
  width: 100%;
  height: 100%;
  padding-bottom: 34px;
  border-right: 1px solid rgba(228,227,227,1);
  background-color: rgba(246, 252, 255, 1);
}
  ._attr-item {
    height: 32px;
    line-height: 32px;
    color: #5a5a5a;
    font-size: 12px;
    display: flex;
    justify-content: flex-start;
    padding-left: 21px;
    cursor: pointer;
    position: relative;
    border: 1px solid rgba(246, 252, 255, 1);
    border-right: 0;
    border-left: 0;
    &:first-child {
      border-top: 0;
    }
    img {
      margin-left: 8px;
      width:16px;
      height:16px;
      margin-top:8px;
    }
  }
  ._triangle {
    height: 34px;
    background-color: rgba(246, 252, 255, 1);
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    //// border-right: 1px solid rgba(228,227,227,1);

    span {
      display: block;
      width: 0;
      height: 0;
      border-left: 4px solid transparent;
      border-right: 4px solid transparent;
      border-bottom: 4px solid black;
      cursor: pointer;
      position: absolute;
      left: 50%;
      margin-left: -2px;
      top: 5px;
      &:last-child {
        transform: rotate(180deg);
        top: 15px;
      }
    }
    .grey {
      border-bottom: 4px solid #969899;
    }
  }
  ._attr-avtive {
    background-color: #ffffff;
    color: #000000;
    font-weight: 600;
    border-color: rgba(228,227,227,1);
    border-right-color: #ffffff;
    margin-right: -1px;
  }
</style>
